<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>随机图片滚动</title>
        <style>
            html,body {
                margin:0;
                padding:0;
            }
           
            ul {
                width:220px;
                margin:50px auto;
                list-style-type:none;
            }
            li {
                width:100px;
                height:50px;
                overflow:hidden;
                float:left;
                margin-right:5px;
                margin-top:5px;
                position:relative;
            }
            div {
                position:absolute;
                left:0;
                top:0;
            }
        </style>
        <script>
            //getStyle
                function getStyle(obj,attr) {
                    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
                }
                
                //shake
                function shake(obj,attr,endFn) {
                    var pos = parseInt( getStyle(obj,attr) );
                    var arr = [];
                    var num = 0;
                    var timer = null;   //*
                    for(var i=10; i>0; i -=2) {
                        arr.push( i,-i );
                    }
                    arr.push(0);
                    
                    clearInterval(obj.shakeTimer);
                    obj.shakeTimer = setInterval( function () {
                        obj.style[attr] = pos + arr[num] + "px";
                        num++;
                        if(num === arr.length) {
                            clearInterval(obj.shakeTimer);
                            if(endFn) {
                                endFn();
                            }
                        }
                    },50 )
                    
                }
                
                //doMove
                function doMove(obj,attr,dir,target,endFn) {
                    dir = parseInt( getStyle(obj,attr) ) < target ? dir : -dir;
                    clearInterval(obj.timer);
                    obj.timer = setInterval( function () {
                        var speed = parseInt( getStyle(obj,attr) ) + dir;
                        if(speed > target && dir > 0 || speed < target && dir < 0) {
                            speed = target;
                        }
                        obj.style[attr] = speed + "px";
                        if(speed == target) {    //*
                            clearInterval(obj.timer);
                            if(endFn) {
                                endFn();
                            }
                        }
                    },30 )
                }
                
                //opacity 
                function opacity(obj,step,target,frequency,endFn) {
                    var currentOpacity =  getStyle(obj,"opacity")*100;  //*
                    step = currentOpacity < target ? step : -step;   //*
                    clearInterval(obj.alpha);
                    obj.alpha = setInterval( function () {
                        currentOpacity = getStyle(obj,"opacity")*100;    
                        var nextOpacity = currentOpacity + step;
                        if(nextOpacity > target && step >0 || nextOpacity < target && step <0) {
                            nextOpacity = target;
                        }
                        obj.style.opacity = nextOpacity/100;
                        obj.style.filter = "alpha(opacity:"+ nextOpacity +")";
                        if(nextOpacity == target) {
                            clearInterval(obj.alpha);
                            if(endFn) {
                                endFn();
                            }
                        }
                    },frequency )
                }
            window.onload = function () {
                var aLi = document.getElementsByTagName("li");
                var step = 0;
                
                function slide(li) {
                    var oDiv = li.getElementsByTagName("div")[0];
                    var flag = 0;
                    function slideOnce() {
                        setTimeout( function () {
                            flag = flag == 0 ? -50 : 0;
                            doMove( oDiv, "top" ,10 ,flag, slideOnce )
                        }, Math.round( Math.random()*3000 + 1000 ) );
                    }
                    slideOnce();
                }
                for(var i=0; i<aLi.length; i++) {
                    slide( aLi[i] );
                }
            }
        </script>
    </head>
    <body>
        <ul>
            <li>
                <div>
                    <img src="img2/1.jpg"/>
                    <img src="img2/2.jpg"/>
                </div>
            </li>
            <li>
                <div>
                    <img src="img2/3.jpg"/>
                    <img src="img2/4.jpg"/>
                </div>
            </li>
            <li>
                <div>
                    <img src="img2/5.jpg"/>
                    <img src="img2/6.jpg"/>
                </div>
            </li>
            <li>
                <div>
                    <img src="img2/7.jpg"/>
                    <img src="img2/8.jpg"/>
                </div>
            </li>
            <li>
                <div>
                    <img src="img2/9.jpg"/>
                    <img src="img2/10.jpg"/>
                </div>
            </li>
            <li>
                <div>
                    <img src="img2/11.jpg"/>
                    <img src="img2/12.jpg"/>
                </div>
            </li>
            <li>
                <div>
                    <img src="img2/13.jpg"/>
                    <img src="img2/14.jpg"/>
                </div>
            </li>
            <li>
                <div>
                    <img src="img2/15.jpg"/>
                    <img src="img2/16.jpg"/>
                </div>
            </li>
        </ul>
    </body>
</html>